<template lang="pug">
  div.upgrade-page
    transition(name='fade')
      div.background(v-show='paying', @click='paying = false')
    div.general
      div.row
        h2.title 套餐价格
      div.row
        div.price-wrapper
          div.package.package-free
            div.title-bg
              span.pack-price.free 免费
              span.pack-title &nbsp;
              p.pack-type 免费版
            ul.pack-features
              li
                span.icon-hook
                span 文章资讯
              li
                span.icon-hook
                span 语音问答
              //- li
                span.icon-hook
                span 产品展示
              li &nbsp;
              li &nbsp;
            button.order-btn(style='visibility: hidden') 马上试用
        div.price-wrapper
          div.package.package-premium
            div.title-bg
              span.pack-price {{ products.standard.price }}
              span.pack-title  元/每月
              p.pack-type 收费版
            ul.pack-features
              li
                span.icon-hook
                span 文章资讯
              li
                span.icon-hook
                span 语音问答
              li
                span.icon-hook
                span 讲座课程（视/音频）
              li
                span.icon-hook
                span 多客服/专家在线咨询
            button.order-btn(@click='paying = true') 马上升级
      div.row
        div.info
          p 有疑问，听听客服怎么说
          button.contact 联系客服
    Form(ref='form', :action='actionUrl', method='POST', :target='target', @submit.native='submit' class='form-wrapper' v-show='paying')
      div.row
        h1.title 支付订单
      div.row.content
        div.col-md-6
          template(v-if='!submitted')
            div.row
              h3.sec-title 续费时间
              FormItem(class='form-time')
                RadioGroup(v-model='period')
                  Radio(label='1') 1个月
                  Radio(label='6') 半年
                  Radio(label='12') 一年
            div.row
              h3.sec-title 支付方式
              FormItem(class='form-type')
                RadioGroup(v-model='payway')
                  //- Radio(label='alipay' class="nth-1")
                    img(src='../../assets/alipay.png')
                  Radio(label='wechat')
                    img(src='../../assets/wechat.png')
          div.result-area(v-if='submitted')
            div(v-if='qrcode' class='qrcode')
              span.text
                span.icon
                span 微信支付，支付 {{ total }} 元
              div.img-wrapper
                img.img-responsive(:src='qrcode')
        div.col-md-6
          input(type='hidden', name='pay_way', :value='payway')
          input(type='hidden', name='subject', :value='subject')
          input(type='hidden', name='app_type', value='standard')
          input(type='hidden', name='period', :value='period')
          input(type='hidden', name='total', :value='total')
          input(type='hidden', name='group_id', :value='groupId')
          div.row
            div.detail-wrapper
              h3.detail-title 订单详情
              div.detail-text 订阅内容：
                span.text-right.num {{ orderBody }}
              div.detail-text 总金额：
                span.text-right.price ￥ {{ total }}
          FormItem.comfirm.text-right
            Button(type='primary', html-type='submit', :loading='loading', v-if='!submitted') 确认支付
            span.ifpay(v-show='errMsg') {{ errMsg }}
            div(v-if='submitted')
              router-link(to='/')
                Button(type='primary', html-type='submit' class='done') 已支付
              span.ifpay 是否已经完成支付？
      div.row

</template>

<script>
import http from '@/apis/http'
import api from '@/apis/app'
import qrUri from '@/libs/qr'

export default {
  data () {
    return {
      loading: false,
      submitted: false,
      payway: 'wechat',
      actionUrl: `${http.baseURL}fd/app/purchase`,
      products: {
        standard: {
          title: '标准版',
          price: 30
        }
      },
      subject: 'standard 3m',
      period: 1,
      paying: false,
      errMsg: '',
      qrcode: null
    }
  },
  computed: {
    total () {
      let period = parseInt(this.period)
      period = period === 1
        ? 1 : period === 6
        ? 5.5 : period === 12
        ? 10 : period
      return this.products.standard.price * period
    },
    target () {
      return this.payway === 'alipay' ? '_blank' : '_self'
    },
    orderBody () {
      return `${this.products.standard.title} (${this.period}个月)`
    },
    groupId () {
      return (this.$store.state.app.info && this.$store.state.app.info.id) || 2
    }
  },
  methods: {
    submit (e) {
      this.errMsg = ''
      this.loading = true
      console.log('submit', this.payway)
      if (this.payway === 'wechat') {
        e.preventDefault()
        // console.log(this.$refs.form.el)

        const pack = {
          pay_way: this.payway,
          subject: this.subject,
          app_type: 'standard',
          period: this.period,
          total: 1 || this.total,
          group_id: this.groupId
        }
        api.upgrade(pack).then(ret => {
          this.submitted = true
          this.qrcode = qrUri(ret)
          this.loading = false
        }).catch(e => {
          this.loading = false
          this.errMsg = '支付参数出错，请重试' || e.message
        })
      }

      // return this.payway === 'alipay'
    }
  }
}
</script>

<style lang="less">
.upgrade-page {
  // width: 100%;
  // height: 100%;
  // background-color: #f6f7f9;
  // position: relative;
  .background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 10;
    &.fade-enter-active, &.fade-leave-active {
      transition: all 0.1s ease;
    }
    &.fade-enter, &.fade-leave-active {
      opacity: 0;
    }
  }
  .content {
    height: 250px;
  }
  .general {
    text-align: center;

    .title {
      font-size: 38px;
      font-weight: 400;
      text-align: center;
    }
    .price-wrapper {
      display: inline-block;
      width: 260px;
      margin: 20px;
    }
    .package {
      border: 2px solid #d3ddff;
      float: left;
      width: 100%;
      border-radius: 6px;
      overflow: hidden;

      .title-bg {
        padding: 30px 0 20px 0;
        border-bottom: 2px dashed #dee5ff;
        width: 85%;
        margin: 0 auto;
      }
      &.package-premium {
        border-style: solid;
      }
    }
    .pack-title {
      margin: 0;
      line-height: 100%;
      font-size: 12px;
      text-align: center;
      color: #bbbfc5;
      margin-top: 4px;
    }
    .pack-price {
      margin: 0;
      color: #1689fe;
      font-weight: 400;
      font-size: 30px;
      text-align: center;
      .currency {
        margin-right: 11px;
      }
    }
    .pack-type {
      text-align: center;
      margin-top: 26px;
      color: #566f89;
      font-size: 14px;
    }
    .pack-duration {
      font-size: 1.8rem;
      margin-left: 11px;
    }
    .pack-features {
      margin:10px 40px;
      padding: 0;
      list-style: none;
      min-height: 110px;
      // padding-bottom: 20px;
      li {
        line-height: 3;
        color: #566f89;
        font-size: 14px;
        text-align: left;
        .icon-hook {
          height: 10px;
          width: 13.5px;
          display: inline-block;
          background: url('../../assets/hook.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 6px;
        }
      }
    }
    .order-btn {
      color: #1689fe;
      border: 1px solid #1689fe;
      font-weight: 600;
      // text-transform: uppercase;
      height: 40px;
      width: 100px;
      line-height: 38px;
      margin: 20px auto;
      padding: 0 10px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all .2s;
      background-color: #fff;
      &:hover {
        color: #fff;
        border-color: #1689fe;
        background-color: #1689fe;
      }
      &:focus {
        outline: none;
      }
    }
    .info {
      p {
        font-size: 12px;
        color: #4d4d4d;
      }
      .contact {
        display: inline-block;
        margin-top: 20px;
        font-size: 14px;
        padding: 6px 16px;
        background-color: #f99700;
        border: none;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
  .form-wrapper {
    padding: 28px;
    width: 722px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    background-color: #fff;
    z-index: 11;
  }
    .col-md-6 {
      width: 50%;
      float: left;
    }
    .title {
      font-weight: 400;
      margin-bottom: 20px;
    }
    .sec-title {
      font-weight: 400;
      background-color: #f9f9f9;
      line-height: 36px;
      padding-left: 15px;
    }
    .form-time {
      padding: 20px 15px;
      margin-bottom: 0;
      height: 73px;
      .ivu-radio-group {
        display: flex;
      }
      .ivu-radio-wrapper {
        flex: 1;
        font-weight: 600;
      }
    }
    .form-type {
      padding: 20px 15px;
      margin-bottom: 0;
      .ivu-radio-wrapper {
        height: 50px;
        img {
          height: 30px;
          width: auto;
          position: relative;
          top: 10px;
          left: 4px;
        }
        &.nth-1 {
          margin-right: 20px;
        }
      }
    }
    .detail-wrapper {
      margin-left: 35px;
      margin-bottom: 30px;
      background-color: #f9f9f9;
      height: 146px;
      .detail-title {
        font-weight: 400;
        line-height: 36px;
        padding-left: 15px;
        border-bottom: 1px solid #e1e2e3;
      }
      .detail-text {
        display: block;
        margin-top: 20px;
        margin-left: 15px;
        .num {
          font-weight: 600;
        }
        .price {
          font-weight: 600;
          color: #fa9505;
        }
      }
    }
    .comfirm {
      .ivu-btn {
        float: right;
        background-color: #fa9505;
        border-color: #fa9505;
        &:hover {
          opacity: 0.9;
        }
      }
      .ifpay {
        display: inline-block;
        float: right;
        color: red;
        margin-right: 10px;
      }
      .done {
        background-color: #52C85F;
        border-color: #52C85F;
        &:hover {
          opacity: 0.9;
        }
      }
    }
    .result-area {
      .qrcode {
        text-align: center;
        .text {
          .icon {
            background: url('../../assets/wechat-icon.png') no-repeat;
            background-size: 100% 100%;
            height: 16px;
            width: 17px;
            display: inline-block;
            margin-right: 3px;
            position: relative;
            top: 3px;
          }
        }
        .img-wrapper {
          margin: 20px auto;
          width: 150px;
          height: 150px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  // }
}
</style>
